@tailwind components;

.graphiql-container,
.CodeMirror-info,
.CodeMirror-lint-tooltip,
.graphiql-dialog,
.graphiql-dialog-overlay,
.graphiql-tooltip,
[data-radix-popper-content-wrapper] {
  --color-base: var(--background);
  @apply !border-border;
}

@media (prefers-color-scheme: dark) {
  body:not(.graphiql-light) .graphiql-container,
  body:not(.graphiql-light) .CodeMirror-info,
  body:not(.graphiql-light) .CodeMirror-lint-tooltip,
  body:not(.graphiql-light) .graphiql-dialog,
  body:not(.graphiql-light) .graphiql-dialog-overlay,
  body:not(.graphiql-light) .graphiql-tooltip,
  body:not(.graphiql-light) [data-radix-popper-content-wrapper] {
    --color-base: var(--background);
  }
}

body.graphiql-dark .graphiql-container,
body.graphiql-dark .CodeMirror-info,
body.graphiql-dark .CodeMirror-lint-tooltip,
body.graphiql-dark .graphiql-dialog,
body.graphiql-dark .graphiql-dialog-overlay,
body.graphiql-dark .graphiql-tooltip,
body.graphiql-dark [data-radix-popper-content-wrapper] {
  --color-base: var(--background);
}

.graphiql-history-header,
.graphiql-doc-explorer-title,
.doc-explorer-title {
  @apply text-2xl font-bold text-foreground;
}

.doc-explorer-title {
  @apply mb-8;
}

.graphiql-container {
  @apply h-full !font-sans;
}

.graphiql-button {
  @apply !px-6;
}

.graphiql-dialog {
  @apply bg-background/30 backdrop-blur-2xl;
}

.graphiql-dialog-overlay {
  @apply bg-background/80 backdrop-blur-sm;
}

.graphiql-explorer-root > :first-child {
  @apply !overflow-hidden;
}

.graphiql-session-header-right {
  @apply flex-shrink-0;
}

.graphiql-tabs {
  @apply z-10;
}
